<template>
    <div style='height:100%;' ref='containerRef'>
		<v-chart v-if='value' autoresize :option='options'></v-chart>
        <XLoading v-else></XLoading>
	</div>
</template>

<script lang='ts'>
    import { use } from "echarts/core";
    import { BarChart } from 'echarts/charts'
    use([BarChart])

    import { defineComponent, reactive, ref, toRef, computed } from "vue";
    interface Props {
		modelValue : {
            province : any[],
            count : any[]
        };
	}

    export default defineComponent({
        props : {
			modelValue : {
				type : Object,
				default : function() {
					return null
				}
			}
		},

        setup(props:Props) {
            const value = toRef(props, 'modelValue')
            const options = computed(() => {
                var options =  {
                    textStyle : {
                        fontFamily : 'sans-serif 微软雅黑'
                    },
                    grid : {
						top : '0px',
						//right : '50px',
						bottom : '30px',
						left : '35px'
					},

                    xAxis: {
                        type: 'value',
                        nameTextStyle : {
                            color : '#becded'
                        },
                        axisLabel : {
                            color : '#becded',
                            fontSize : 12
                        },
                        axisTick : {
                            show : false
                        },
                        
                        splitLine : {
                            show : false
                        }
                    },
                    yAxis: {
                        type: 'category',
                        axisLine : {
                            lineStyle : {
                                color : '#808ca4'
                            }
                        },
                        
                        axisTick : {
                            show : false
                        },
                        
                        axisLabel : {
                            color : '#becded',
                            fontSize : 12
                        },
                        data : value.value.province
                    },
                    series : [
                        {
                            name : '订单数',
                            type: 'bar',
                            barWidth : 10,
                            data : value.value.count,
                            label : {
                                show : true,
                                position: 'right',
                                borderColor : 'transparent',
                                textBorderColor : 'none',
                                color : '#fff'
                            },
                            itemStyle : {
                                barBorderRadius : 7,
                                color : {
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 1,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#6e9dfe' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#66d6ed' // 100% 处的颜色
                                    }]
                                }
                            }
                        }
                    ]
                }

                return options
            })

            return {
                value,
                options
            }
        }
    })
</script>